<template>
    <nav class="nav-bar">
        <div>
            <span v-if=" !showSearchComponent&&!$route.meta.showBack " class="iconfont icon-message"></span>
            <span v-if=" showSearchComponent||$route.meta.showBack " class="iconfont icon-left" @click=" goback() "></span>
        </div>
        <div>
            <input type="text" @focus="showSearchComponent=true" v-model=" wk " :placeholder="search" />
            <span class="iconfont icon-search"></span>
        </div>
        <div>
            <span v-if=" !showSearchComponent&&!$route.meta.showBack" class="iconfont icon-cart cart"></span>
            <span v-if=" showSearchComponent||$route.meta.showBack " class="searchBtn" @click=" toSearch(wk?wk:search) ">搜索</span>
        </div>
        <transition enter-active-class="animated bounceInUp" leave-active-class="animated bounceOutDown">
            <div class="searchComponent" v-if="showSearchComponent">
                <!-- 历史搜索  start -->
                <div>
                    <div>
                        <span class="iconfont icon-search"></span>
                    </div>
                    <div>
                        <div>历史搜索</div>
                        <div class="keyWord" v-if="history">
                            <div v-for="(item, index) in history" :key="index" @click=" toSearch(item) ">{{item}}</div>
                        </div>
                        <div class="empty" v-if="!history">暂无查询记录</div>
                    </div>
                    <div>
                        <span class="iconfont icon-trash"></span>
                    </div>
                </div>
                <!-- 历史搜索  end -->
                <!-- 热门搜索  start -->
                <div>
                    <div>
                        <span class="iconfont icon-search"></span>
                    </div>
                    <div>
                        <div>热门搜索</div>
                        <div class="keyWord">
                            <div v-for="(item, index) in keyWordsData.hotWord.data" :key="index" :style="'color:'+item.color" @click="toSearch(item.frontword)">{{item.frontword}}</div>
                        </div>
                    </div>
                    <div>
                        <span></span>
                    </div>
                </div>
                <!-- 热门搜索  start -->
            </div>
        </transition>
    </nav>
</template>

<script>
export default {
    data() {
        return {
            search: "",
            wk: "",
            showSearchComponent: false,
            keyWordsData: [],
            history: []
        };
    },
    methods: {
        goback() {
            if (this.showSearchComponent) {
                this.showSearchComponent = false;
            } else {
                this.$router.go(-1);
            }
        },
        setKeyWords() {
            this.$api
                .loadKeyWords({
                    platform: "H5",
                    code: "hotWord,sketch"
                })
                .then(data => {
                    this.keyWordsData = data;
                    this.search = data.sketch.data.query;
                })
                .catch(this.$error);
        },
        //点击搜索，历史搜索，热门搜索都跳转到这个方法
        toSearch(q) {
            //将关键字，存到localstorage
            this.setHistory(q);
            this.showSearchComponent = false;
            this.$router.push({
                name: "search",
                query: {
                    q: q
                }
            });
        },
        setHistory(word) {
            if (this.history) {
                if (this.history.indexOf(word) == -1) {
                    this.history.push(word);
                }
            }
            //因为刷新页面之后，这个组件会被销毁，所以this.history也就为空了，再搜索，localstorage存的会重新开始算
            localStorage.setItem("historyWord", JSON.stringify(this.history));
        }
    },
    beforeMount() {
        this.$root.$on("changeWk", arg => {
            this.wk="";
            this.search = arg;
        });
    },
    mounted() {
        //解决刷新后this.history会置空：在mounted中，将刷新之前的localStorage值赋值给this.history

        //如果手动清除localStorage后再刷新，let history得到的是null，会导致setHistory里push失效，因为此时this.history不是数组
        //所以要判断一下
        //  let history = localStorage.getItem("historyWord");
        // this.history = JSON.parse(history);
        if (localStorage.getItem("historyWord")) {
            let history = localStorage.getItem("historyWord");
            this.history = JSON.parse(history);
        } else {
            this.history = [];
        }
        this.setKeyWords();
    }
};
</script>

<style lang="less" scoped>
.search {
    display: flex;
    flex-flow: row nowrap;
    > div:nth-child(1) {
        width: 13%;
        padding: 30px 0;
        border-bottom: 1px solid @99;
        span {
            color: @66;
            font-size: 36px;
            margin-left: 35px;
        }
    }
    > div:nth-child(2) {
        color: @font;
        width: 74%;
        padding: 30px 0;
        border-bottom: 1px solid @99;
        > div:first-child {
            margin-bottom: 10px;
        }
        > .keyWord {
            &::after {
                content: "";
                display: block;
                clear: both;
            }
            > div {
                float: left;
                height: 50px;
                border: 1px solid @99;
                border-radius: 10px;
                font-size: 27px;
                text-align: center;
                line-height: 50px;
                padding: 0 5px;
                margin-top: 10px;
                margin-right: 10px;
            }
        }
        > .empty {
            font-size: 28px;
            padding: 10px 20px;
        }
    }
    > div:nth-child(3) {
        width: 13%;
        padding: 30px 0;
        border-bottom: 1px solid @99;
        span {
            color: @66;
            font-size: 36px;
            margin-left: 25px;
        }
    }
}
.nav-bar {
    @p: 20px;
    width: 100vw;
    height: @h;
    display: flex;
    flex-flow: row nowrap;
    background-color: white;
    box-sizing: border-box;
    padding: @p 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    border-bottom: 1px solid @de;
    > div:nth-child(1) {
        width: 13%;
        text-align: center;
        span {
            line-height: @h - @p*2;
            font-size: @iconSize;
        }
    }
    > div:nth-child(2) {
        width: 74%;
        position: relative;
        input {
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 10px;
            box-sizing: border-box;
            background-color: @cc;
            color: @font;
            font-size: 30px;
            padding-left: 40px;
        }
        span {
            position: absolute;
            top: 0;
            left: 5px;
            font-size: 30px;
            line-height: 2.1;
        }
    }
    > div:nth-child(3) {
        width: 13%;
        text-align: center;
        .cart {
            line-height: @h - @p*2;
            font-size: @iconSize;
        }
        .searchBtn {
            line-height: @h - @p*2;
            font-size: 32px;
            font-weight: bold;
        }
    }
    .searchComponent {
        width: 100vw;
        position: absolute;
        top: @h;
        bottom: -100vh;
        background-color: @white;
        > div:first-child {
            &:extend(.search all);
        }
        > div:last-child {
            &:extend(.search all);
        }
    }
}
</style>